<template>
<div>
    <p class="click-p">当前点击的是</p>
    <p  class="click-p"><span style="color: red;">{{ clickedData }}</span></p>
    <div class="recommend-main">
        <div class="recommend-single" v-for="(item,index) in list" :key="item.id"  @click="clickData(index)">
            <img :src='item.imgUrl' alt="">
            <p>{{ item.name }}</p>
            <div class="details">
                <div class="details-left">
                    <div class="price">{{ item.price | newPrice }}</div>
                    <div class="new" v-if="item.new !== ''">{{ item.new }}</div>
                    <div class="free" v-if="item.free !== ''">{{ item.free }}</div>
                    <div class="fullMinus" v-if="item.fullMinus !== ''">{{ item.fullMinus }}</div>
                </div>
                <div class="similar">{{ item.similar }}</div>
            </div>
        </div>
    </div>
</div>
</template>

<script>

export default {
    data(){
        return {
            list: [
                {
                    id: 1,
                    name: '小米11 Ultra，开启影像新时代',
                    price: 5999,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '上新',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 2,
                    name: '智能定时|用电统计|过载保护',
                    price: 49,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 3,
                    name: '小身材也有大智慧',
                    price: 49,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '包邮',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 4,
                    name: 'Redmi Note 9 4G,6000mAh大电量,...',
                    price: 999,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '满减',
                    similar: '看相似'
                },
                {
                    id: 5,
                    name: '青年"无须"新选择',
                    price: 99,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 6,
                    name: '全面屏更多可能',
                    price: 229,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '上新',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 7,
                    name: '5号彩虹电池(10粒)，无汞无镉 安...',
                    price: 9.9,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 8,
                    name: '小米插线板 5孔位,过载断电保护 独立安...',
                    price: 39,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 9,
                    name: '支持蓝牙5.0，自动秒连，拿起就能用',
                    price: 99,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                },
                {
                    id: 10,
                    name: '简约设计，丝滑书写',
                    price: 24.9,
                    imgUrl: require("./../../../assets/cart-img/2768f0ffc7d8dd66e5c58c9062898338.png"),
                    new: '',
                    free: '',
                    fullMinus: '',
                    similar: '看相似'
                }
            ],
            clickedData: null
        }
    },
    methods: {
        clickData(val){
            this.clickedData = this.list[val].name;
            // console.log(this.clickedData);
        }
    },
    filters: {
        newPrice(val){
            return '￥' + val;
        }
    }
    
}
</script>

<style scoped lang="scss">
.click-p{
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
}
.recommend-main{
    width: 380px;
    margin: auto;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .recommend-single{
        width: 185px;
        margin-top: 10px;
        background-color: white;
        border-radius: 5px;
        // outline: 2px solid fuchsia;
        img{
            width: 180px;
            height: 180px;
            margin: auto;
            background-color: #FBFBFB;
        }
        p{
            margin: 8px;
        }
        .details{
            margin: 8px;
            display: flex;
            justify-content: space-between;
            .details-left{
                display: flex;
                .price{
                    font-size: 20px;
                    color: orangered;
                }
                .new{
                    font-size: 15px;
                    margin-left: 5px;
                    color: orangered;
                    border: 1px solid orangered;
                    height: 15px;
                    line-height: 14px;
                    padding: 0 2px;
                    border-radius: 5px;
                    margin-top: 7px;
                }
                .free{
                    font-size: 15px;
                    margin-left: 5px;
                    color: orangered;
                    border: 1px solid orangered;
                    height: 15px;
                    line-height: 14px;
                    padding: 0 2px;
                    border-radius: 5px;
                    margin-top: 7px;
                }
                .fullMinus{
                    font-size: 15px;
                    margin-left: 5px;
                    color: orangered;
                    border: 1px solid orangered;
                    height: 15px;
                    line-height: 14px;
                    padding: 0 2px;
                    border-radius: 5px;
                    margin-top: 7px;
                }
            }
            .similar{
                    font-size: 15px;
                    color: gray;
                    border: 1px solid gray;
                    height: 15px;
                    line-height: 14px;
                    padding: 0 2px;
                    border-radius: 5px;
                    margin-top: 7px;
            }
        }
    }
}
</style>